<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- vue 语法识别区域 -->
        <p @click="addCount">count:{{count}}</p>

    </div>
</body>

</html>
<script>

    // 如下是选项式的语法 

    // const { createApp } = Vue;
    // const vm = createApp({
    //     data() { // 01:定义的数据
    //         return {
    //             arr: ['刘备', '关羽', '张飞']
    //         }
    //     },
    //     methods: { // 定义方法, 定义的是操作 data 中的数据的所有的方法
    //         addHero() {
    //             vm.arr.push('马超')
    //         }
    //     }

    // }).mount('#app')

    // 如下是组合式的语法   (过渡语法, 现在不这么写)
    const { createApp, ref } = Vue;
    const vm = createApp({
        // 该语法不建议这么写
        setup() {
            // 该位置就可以写组合式的语法了
            const count = ref(100)
            const addCount = () => {
                console.log(count);
                count.value++
            }
            return {
                count,
                addCount
            }
        }
    }).mount('#app')

</script>